<template>
	<view class="smart-page">
		<view class="smart-page-head">
			<view class="smart-page-head-title">textarea 文本框</view>
		</view>
		
		<view class="smart-padding-wrap">
			<view class="section">
				<view class="section-title">高度自适应</view>
				<view class="section-desc">输入区域高度自适应，不会出现滚动条</view>
				<view class="card">
					<textarea class="text-area auto-height" 
							  placeholder="请输入内容，文本框会随着内容自动调整高度..."
							  auto-height></textarea>
				</view>
			</view>

			<view class="section">
				<view class="section-title">自定义占位符</view>
				<view class="section-desc">占位符字体是红色的</view>
				<view class="card">
					<textarea class="text-area custom-placeholder" 
							  placeholder-style="color:#F76260; font-size: 28rpx;"
							  placeholder="请输入红色占位符文本..."></textarea>
				</view>
			</view>
			
			<view class="section">
				<view class="section-title">其他样式</view>
				<view class="card">
					<textarea class="text-area rounded-style" 
							  placeholder="圆角边框样式..."
							  maxlength="100"></textarea>
					<view class="char-count">0/100</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.smart-page {
		background: #f8f9fa;
		min-height: 100vh;
		padding: 30rpx;
	}
	
	.smart-page-head {
		text-align: center;
		margin-bottom: 40rpx;
		padding: 30rpx 0;
	}
	
	.smart-page-head-title {
		font-size: 40rpx;
		font-weight: 600;
		color: #2c3e50;
	}
	
	.section {
		margin-bottom: 40rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 12rpx;
	}
	
	.section-desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}
	
	.text-area {
		width: 100%;
		min-height: 200rpx;
		padding: 24rpx;
		font-size: 28rpx;
		line-height: 1.6;
		color: #333;
		background: #fff;
		border: 2rpx solid #e1e5e9;
		border-radius: 12rpx;
		transition: all 0.3s ease;
		box-sizing: border-box;
	}
	
	.text-area:focus {
		border-color: #007AFF;
		background: #f8faff;
		box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
		outline: none;
	}
	
	.auto-height {
		border-color: #4CD964;
	}
	
	.auto-height:focus {
		border-color: #4CD964;
		box-shadow: 0 0 0 4rpx rgba(76, 217, 100, 0.1);
	}
	
	.custom-placeholder {
		border-color: #F76260;
	}
	
	.custom-placeholder:focus {
		border-color: #F76260;
		box-shadow: 0 0 0 4rpx rgba(247, 98, 96, 0.1);
	}
	
	.rounded-style {
		border-radius: 20rpx;
		border-color: #5856D6;
	}
	
	.rounded-style:focus {
		border-color: #5856D6;
		box-shadow: 0 0 0 4rpx rgba(88, 86, 214, 0.1);
	}
	
	.char-count {
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.smart-page {
			padding: 20rpx;
		}
		
		.card {
			padding: 20rpx;
		}
		
		.text-area {
			min-height: 180rpx;
			padding: 20rpx;
		}
	}
</style>